<template>
    <swiper 
    :spaceBetween="50" 
    :slidesPerView="2"
    :centeredSlides="true" 
    :autoplay="{
        delay: 2000,
        disableOnInteraction: false,
    }" 
    centeredSlides
    :pagination="{
    clickable: true
    }" 
    :modules="[Autoplay, Pagination,  ]" 
    class="mySwiper">
        <swiper-slide v-for="(item,index) in imgList" :key="index">

            <img class="spimg" :src="item.typeImg"
                >
        </swiper-slide>
        

    </swiper>
</template>
<script setup>

//  第一步 安装   

// npm i swiper


// 第二步  引入 

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue"

// Import Swiper styles
import "swiper/css"

import "swiper/css/pagination"
import "swiper/css/navigation"

// import "./style.css"

// import required modules
import { Autoplay, Pagination,  } from "swiper"

import { onMounted,ref } from 'vue';
import {getSwip} from '../../api/bangdan'
const imgList = ref([])
onMounted(async ()=>{
    // 发送请求获取信息
    let res = await getSwip()
// 渲染到页面
    imgList.value = res.data.page.list
})

</script>
  
  
<style scoped>
.swiper{
    width: 375px;
    padding: 0;
    margin: 0;
}
.swiper-slide {
    height: 280px;
    width: 170px;
    padding: 0;
    margin: 0;
}

.spimg {
    height: 250px;
    width: 170px;
    padding: 0;
    margin: 0;
}
</style>
  